/*

@description: 冷链服务（style）

@author: 赖赖

@update: 2021年9月6日15:23:48

*/

// 主要内容
main{

    // 主要内容的标题
    h1{
        padding-top: 34px;
        padding-bottom: 34px;
        text-align: center;
        color: rgb(3, 145, 244);
        font-size: 34px;
    }
    ul{
        display: flex;
            justify-content: space-around;
            width: 1200px;
            margin: auto;
    }

    // 冷链服务
    .cpfw{
        height: 440px;
        background: url('https://www.jdl.cn/_nuxt/img/cold_chain_banner_bg.f6afee4.png');
        
        hgroup{//主体
            width: 1200px;
            margin: auto;
            display: flex;
            flex-direction:column;
            justify-content:center;

            h2{//标题1
                margin-top: 110px;
                font-size: 45px;
                color: rgb(250,250,250);
            }

            p{//标题2
                width: 466px;
                margin-top: 35px;
                font-size: 16px;
                color: rgb(250,250,250);
                text-align:justify;
                line-height: 25px;
            }
        }
    }

    // 服务优势
    .ys{
        height: 450px;
        background: rgb(247, 247, 247);

        ul{// 模块总框
            li{// 单个模块
                width: 290px;
                height: 300px;
                background: rgb(0,112,192);
                border-radius: 8px;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;

                img{//图标
                    width: 80px;
                    height: 80px;
                    background-size: cover;
                }

                h2{//标题
                    font-size: 24px;
                    color: rgb(250,250,250);
                    padding-top: 20px;
                    padding-bottom: 24px;
                }

                h3{// 说明
                    font-size: 14px;
                    color: rgb(250,250,250);
                }
            }
        }
    }

    // 生鲜业务
    .sx{
        ul{// 总列表
            width: 1200px;
            height: 545px;
            margin: auto;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: space-between;
            li{// 单个列表
                width: 380px;
                height: 245px;
                position: relative;
                
                .yl{//初始状态右拉
                    width: 0;
                    height: 100%;
                    position: absolute;
                    left: 0;
                    opacity: 0;
                    background-color: rgb(0, 112, 192);
                    transition: all 0.5s ease;
                    
                    h3{// 初始状态
                        width: 300px;
                        font-size: 28px;
                        color: rgb(255, 255, 255);
                        position: absolute;
                        top: 68px;
                        left: 110px;
                        transition: all 0.5s;
                    }

                    
                    p{// 初始状态
                        width: 300px;
                        color: rgb(255, 255, 255);
                        text-align:justify;
                        position: absolute;
                        top: 118px;
                        left: 20px;
                        transition: all 0.5s;
                    }
                }
                
                hgroup{// 中间框
                    width: 170px;
                    height: 116px;
                    position: absolute;
                    left: 50%;
                    top: 50%;
                    transform: translate(-50%,-50%);
                    border-radius: 2px;
                    border: 2px solid rgba(255,255,255,0.2);
                    border-top: none;
                    box-sizing: border-box;

                    
                    .bt{// 标题
                        width: 166px;
                        display: flex;
                        justify-content: space-between;
                        
                        h5{//横线
                            width: 20px;
                            height: 2px;
                            background-color: rgba(255,255,255,0.2);
                        }
                        
                        h4{//标题字体
                            transform: translateY(-20px);
                            font-size: 28px;
                            color: rgb(0, 150, 250);
                        }
                    }
                    
                    h6{// 小字体
                        transform: translateY(-10px);
                        text-align: center;
                        font-size: 16px;
                        color: rgb(255, 255, 255);
                        line-height: 24px;
                    }
                }
            }

            //悬浮效果
            li:hover > .yl{
                width: 100%;
                opacity: 1;
            }
            li:hover h3{
                left: 132px;
            }
            li:hover p{
                left: 38px;
            }
            li:hover > hgroup{
                opacity: 0;
            }
        }
    }

    // 医药业务
    .yy{
        height: 700px;
        background: url('https://www.jdl.cn/_nuxt/img/cold_medicine_bg5.5de0106.jpg');
        background-size: cover;

        ul{// 总列表
            width: 1200px;
            height: 545px;
            margin: auto;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: space-between;
            li{// 单个列表
                width: 590px;
                height: 230px;
                position: relative;
                
                .yl{//初始状态右拉
                    width: 0;
                    height: 100%;
                    position: absolute;
                    left: 0;
                    opacity: 0;
                    background-color: rgb(0, 112, 192);
                    transition: all 0.5s ease;
                    
                    h3{// 初始状态
                        width: 300px;
                        font-size: 28px;
                        color: rgb(255, 255, 255);
                        position: absolute;
                        top: 40px;
                        left: 110px;
                        transition: all 0.5s;
                    }

                    
                    p{// 初始状态
                        width: 394px;
                        color: rgb(255, 255, 255);
                        text-align:justify;
                        position: absolute;
                        top: 92px;
                        left: 20px;
                        transition: all 0.5s;
                    }
                }
                
                hgroup{// 中间框
                    width: 418px;
                    height: 130px;
                    position: absolute;
                    left: 50%;
                    top: 50%;
                    transform: translate(-50%,-50%);
                    border-radius: 2px;
                    border: 2px solid rgba(255,255,255,0.2);
                    border-top: none;
                    box-sizing: border-box;

                    
                    .bt{// 标题
                        display: flex;
                        justify-content: space-between;
                        
                        h5{//横线
                            width: 130px;
                            height: 2px;
                            background-color: rgba(255,255,255,0.2);
                        }
                        
                        h4{//标题字体
                            transform: translateY(-20px);
                            font-size: 28px;
                            color: rgb(0, 150, 250);
                        }
                    }
                    
                    h6{// 小字体
                        transform: translateY(-10px);
                        text-align: center;
                        font-size: 16px;
                        color: rgb(255, 255, 255);
                        line-height: 22px;
                    }
                }
            }

            //悬浮效果
            li:hover > .yl{
                width: 100%;
                opacity: 1;
            }
            li:hover h3{
                left: 240px;
            }
            li:hover p{
                left: 70px;
            }
            li:hover > hgroup{
                opacity: 0;
            }
        }
    }
}